<!DOCTYPE html>
<html lang="cn">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="referrer" content="origin" />
    <meta
      name="viewport"
      content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <meta
      http-equiv="Cache-Control"
      content="no-cache, no-store, must-revalidate"
    />
    <title>支付完成</title>
    <script
      type="text/javascript"
      charset="UTF-8"
      src="https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"
    ></script>

    <style>
      body {
        font-family: PingFang SC, "Helvetica Neue", Arial, sans-serif;
      }

      .container {
        padding: 15px;
        display: flex;
        height: 600px;
        flex-direction: column;
        align-items: center;
      }
      .icon {
        background: url("https://3ayj-oss.oss-cn-shenzhen.aliyuncs.com/pic/sprite_fm.png")
          0 0 no-repeat;
        background-size: 985px 650px;
        width: 40px;
        height: 40px;
        margin: 15px;
        border-radius: 50%;
        background-position: -729px -215px;
      }
      .icon img {
        display: inline-block;
        height: 40px;
        width: 40px;
        border-radius: 20px;
      }
      .msg {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 15px;
      }
      #tips {
        margin-bottom: 15px;
      }
      #cost {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 15px;
      }
      #toOrder {
        width: 100%;
        line-height: 50px;
        background-color: #00d660;
        color: #fff;
        border-radius: 7px;
      }
      #toOrder span {
        display: inline-block;
        width: 100%;
        text-align: center;
      }
      #toHome {
        width: 100%;
        margin-top: .5rem;
        line-height: 50px;
        color: #00d660;
        border-radius: 7px;
      }
      #toHome span {
        display: inline-block;
        width: 100%;
        text-align: center;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="icon"></div>
      <div class="msg">
        <span style="color: #00d660">支付成功</span>
      </div>
      <div id="tips"></div>
      <div id="cost"></div>
      <div id="toOrder">
        <span>查看支付详情</span>
      </div>
      <div id="toHome">
        <span>回到首页</span>
      </div>
    </div>

    <script>
      //初始化console  调试商家小票最好打开这个，可以看到接口访问时间
      // var vConsole = new VConsole();

      const baseURL = "https://saas.hsjiafu.com"

      //获取返回页面参数
      function getQueryString(name) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
          var pair = vars[i].split("=");
          if (pair[0] == name) {
            return pair[1];
          }
        }
        return null;
      }

      //获取参数
      // "特约商户号（sub_mch_id）"、"商户订单号（out_trade_no）"
      // ?sub_mch_id=123456G&che7&out_trade_no=ABCDEFck_code=39f0876dd58e4eb61b66250f69d02705
      var sub_mch_id = getQueryString("sub_mch_id"); //特约商户号
      // console.log("sub_mch_id is " + sub_mch_id)
      var out_trade_no = getQueryString("out_trade_no"); //商户订单号
      // console.log("out_trade_no is " + out_trade_no)
      var check_code = getQueryString("check_code"); //md5 校验码  如果服务商是通过银行注册的，需要银行提供接口进行订单验证，该验证码需要根据银行那边进行特殊处理
      // console.log("check_code is " + check_code)

      $.ajax({
        type: "GET",
        url: `${baseURL}/prod/app-api/train/order/get-basic-info-by-pay-order-id?payOrderId=${out_trade_no}`,
        headers: {
          "tenant-id": "1691354060659232768",
        },
        success(res) {
          console.log("请求成功", res);
          // 展示信息
          $("#cost").html("￥" + res.data.orderPrice / 100);
          $("#tips").html("订单号: " + res.data.orderNo);

          // 通知点金计划
          const initData = {
            action: "onIframeReady",
            displayStyle: "SHOW_CUSTOM_PAGE",
          };
          const initPostData = JSON.stringify(initData);
          parent.postMessage(initPostData, "https://payapp.weixin.qq.com");

          // 点击跳转
          $("#toOrder").on("click", () => {
            const mchData = {
              action: "jumpOut",
              jumpOutUrl: `${baseURL}/h5/#/order/${res.data.orderNo}`,
            };
            const postData = JSON.stringify(mchData);
            parent.postMessage(postData, "https://payapp.weixin.qq.com");
          });

          // 返回首页
          $("#toHome").on("click", ()=>{
            const mchData = {
              action: "jumpOut",
              jumpOutUrl: `${baseURL}/h5/#/`,
            };
            const postData = JSON.stringify(mchData);
            parent.postMessage(postData, "https://payapp.weixin.qq.com");
          })
        },
      });
    </script>
  </body>
</html>
